<link rel="stylesheet" type="text/css" href="/static/argu/css/plugins/checkbox/styles.css" />
<!--<link rel="stylesheet" type="text/css" href="/static/argu/css/plugins/checkbox/inserthtml.com.radios.min.css"/>-->
<link href="/static/argu/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="/static/argu/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
<link href="/static/argu/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-sm-4">
		<h2>任务详情</h2>
	</div>
</div>
<div class="wrapper wrapper-content">
	<div class="ibox-content">
		<div class="row row-lg">
			<div class="row">
				<div class="col-sm-12">
					<div class="tabs-container">
						<ul class="nav nav-tabs">
							<li class="active">
								<a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基本信息</a>
							</li>
							<li class="">
								<a data-toggle="tab" href="#tab-2" aria-expanded="false">运行实况</a>
							</li>
							<li class="">
								<a data-toggle="tab" href="#tab-3" aria-expanded="false">数据展示</a>
							</li>
						</ul>
						<div class="tab-content">
							<!--tab-1-->
							<div id="tab-1" class="tab-pane active">
								<div class="panel-body">
									<form id="task-form" class="form-horizontal">
										<div class="form-group">
											<label class="col-sm-2 control-label">任务名称</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="info.name"  disabled/>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">目标站点</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="info.url" name="urllist" disabled/>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">模板</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="info.casename" name="urllist" disabled/>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">爬虫策略</label>

											<div class="col-sm-10">
												<div class="checkbox">
													<input type="checkbox" id="checkbox-5-1" ng-model="info.stra_delay" disabled/><label for="checkbox-5-1"> </label>访问延迟
												</div>
												<div class="checkbox">
													<input type="checkbox" id="checkbox-5-12" ng-model="info.stra_ua" disabled /><label for="checkbox-5-12"> </label>动态UA
												</div>
												<div class="checkbox">
													<input type="checkbox" id="checkbox-5-13" ng-model="info.stra_proxy" disabled/><label for="checkbox-5-13"> </label>代理IP
												</div>
												<div class="checkbox">
													<input type="checkbox" id="checkbox-5-14" ng-model="info.stra_js" disabled/><label for="checkbox-5-14"> </label>解析JS
												</div>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">运行周期</label>
											<div class="col-sm-10">

												<input type="text" id="ionrange_time" name="time" ng-model="info.cycletime" class="form-control" data-from="">
												<span class="help-block m-b-none">设置爬虫周期性运行的时间间隔</span>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">节点数量</label>

											<div class="col-sm-10">

												<div class="col-sm-2">
													<div class="m-r-md inline">
														<knob knob-data="knobData[0].value" knob-options="knobData[0].options"></knob>
													</div>
													<label style="padding-left: 40px">urlSpider</label>
												</div>
												<div class="col-sm-2">
													<div class="m-r-md inline">
														<knob knob-data="knobData[1].value" knob-options="knobData[1].options"></knob>
													</div>
													<label style="padding-left: 40px">dataSpider</label>
												</div>
												<div class="col-sm-2">
													<div class="m-r-md inline">
														<knob knob-data="knobData[2].value" knob-options="knobData[2].options"></knob>
													</div>
													<label style="padding-left: 40px">Redis</label>
												</div>
												<div class="col-sm-2">
													<div class="m-r-md inline">
														<knob knob-data="knobData[3].value" knob-options="knobData[3].options"></knob>
													</div>
													<label style="padding-left: 40px">Mongo</label>
												</div>
											</div>
										</div>
										<div class="hr-line-dashed"></div>
									</form>
								</div>
							</div>
							<!--tab-1 ends-->
							<!--tab-2-->
							<div id="tab-2" class="tab-pane">
								<div class="panel-body">
									<div class="col-sm-6 col-md-6 col-lg-6">
										<div class="panel panel-default text-center">
											<div class="panel-heading text-center">
												urlspider任务队列数
											</div>
											<div class="panel-body text-center">
												<ng-echarts style="height: 450px;" class="col-md-12 echarts" ec-option="lineOption1" ec-config="baseConfig"></ng-echarts>
											    <p><span class ="label label-primary">当前数据量:{{ urlcount }}</span></p>
                                            </div>
										</div>
									</div>
									<div class="col-sm-6 col-md-6 col-lg-6 text-center">
										<div class="panel panel-default  text-center">
											<div class="panel-heading">
												dataspider任务队列数
											</div>
											<div class="panel-body text-center">
												<ng-echarts style="height: 450px;" class="col-md-12 echarts" ec-option="lineOption2" ec-config="baseConfig"></ng-echarts>
											    <p><span class ="label label-primary">当前数据量:{{ datacount }}</span></p>
                                            </div>
										</div>
									</div>
									<div class="col-md-2">
									</div>
									<div class="col-md-8  text-center">
										<div class="panel panel-default text-center">
											<div class="panel-heading">
												采集数据总量
											</div>
											<div class="panel-body text-center">
												<ng-echarts style="height: 550px;" class="col-md-12 echarts" ec-option="lineOption3" ec-config="baseConfig"></ng-echarts>
											    <p><span class ="label label-primary">当前数据量:{{ data3count }}</span></p>
                                            </div>
										</div>
									</div>
									<div class="col-md-2">
									</div>
									<div class="col-md-12  text-center">
										<div class="panel panel-default text-center">
											<div class="panel-heading">
												网络拓扑图
											</div>
											<div class="panel-body">
												<ng-echarts style="height: 900px;" class="col-md-12 echarts" ec-option="graphoption" ec-config="baseConfig"></ng-echarts>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="panel panel-default">
											<div class="panel-heading">
												交互信息
											</div>
											<div class="panel-body">
												<div hljs language="java" source="hl">

												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--tab-2 ends-->
							<!--tab-3-->
							<div id="tab-3" class="tab-pane">


					<!-- Workspaces containers -->
					<div class="workspaceContainer">
						<table id="table" bs-table-control="workspaces[0].bsTableControl"></table>

					</div>

							</div>
						</div>
						<!--tab content ends-->
					</div>
				</div>
			</div>
		</div>

		<!-- iCheck -->
		<script src="/static/argu/js/plugins/iCheck/icheck.min.js"></script>

		<!-- IonRangeSlider -->
		<script src="/static/argu/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

		<!-- JSKnob -->
		<script src="/static/argu/js/plugins/jsKnob/jquery.knob.js"></script>

		<script>
			$(document).ready(function() {
				$('.i-checks').iCheck({
					checkboxClass: 'icheckbox_square-green',
					radioClass: 'iradio_square-green',
				});

				$(".dial").knob();

				$('pre code').each(function(i, block) {
					hljs.highlightBlock(block);
				});

				//		hljs.initHighlightingOnLoad();

			});
		</script>
